import { usePersonStore } from '@/store/person'
import { useHomeStore } from '@/store/home'
import { computed, reactive, ref, toRefs } from 'vue'
import { Operate, Person } from '@/types/person'
import { IdLabel, IdName } from '@/types/global'
import { Notify } from 'vant'
import { useRoute } from 'vue-router'

export interface OperateParams {
  person: Person
  index: number
  type: string
}

export const usePersonEffect = () => {
  const route = useRoute()

  const personStore = usePersonStore()
  const homeStore = useHomeStore()

  const community_id = localStorage.getItem('home_filter_community_id') || ''
  const community = localStorage.getItem('home_filter_community') || ''
  const mch_id = localStorage.getItem('home_filter_mch_id') || ''
  const mch = localStorage.getItem('home_filter_mch') || ''
  const confirm_status = localStorage.getItem('home_filter_confirm_status') as string
  const confirm_status_txt = confirm_status ? personStore.confirm_status_obj[confirm_status] : ''
  const isolate_reason = localStorage.getItem('home_filter_isolate_reason') || ''
  const isolate_reason_label = isolate_reason
  const isolate_status = localStorage.getItem('home_filter_isolate_status') || ''
  const isolate_status_label = isolate_status ? personStore.isolate_status_obj[isolate_status] : ''
  const isolate_endtime = localStorage.getItem('home_filter_isolate_endtime') || ''

  const operateList = computed(() => personStore.operateList)
  const filterOperateList = ref<Operate[]>([])

  const curPerson = ref<Person>()
  const curIndex = ref()

  const showOperatePicker = ref(false) // 性别
  const onOperateConfirm = (values: Operate) => {
    showOperatePicker.value = false
    const { fn } = values;
    (personStore as any)[fn](true)
  }

  // const form = reactive({ // 用来展示页面
  //   keyword: '',
  //   mch_id: mch,
  //   community_id: community,
  //   confirm_status: confirm_status_txt,
  //   isolate_status: '',
  //   isolate_reason: ''
  // })
  const query = reactive({ // 用来筛选条件
    keyword: '',
    mch_id: mch_id,
    mch_label: mch,
    community_id: community_id,
    community_label: community,
    confirm_status: confirm_status,
    confirm_label: confirm_status_txt,
    isolate_status: isolate_status,
    isolate_status_label: isolate_status_label,
    isolate_reason: isolate_reason,
    isolate_reason_label: isolate_reason_label,
    isolate_endtime: isolate_endtime,
    page: 1,
    count: 20
  })


  const pageState = reactive({
    loading: false,
    personList: [] as Person[],
    finished: false,
    refreshing: false
  })

  const getPersonList = async (isInit: boolean) => {
    /**
     * 从store中获取：从detail返回， isKeepAlive === true & isInit === true
     * 调用接口：第一次进入 & 下拉刷新 & 加载更多， isKeepAlive === true / false &  isInit === false
     */
    if(route.meta.isKeepAlive && isInit) {
      const { personList, finished, current_page } = personStore.pageState
      pageState.personList = personList
      pageState.finished = finished
      query.page = current_page
    } else {
      pageState.loading = true
      const { data, meta: { pagination: {current_page, total_pages} } } = await personStore.getPersonList(query as any) as any
      if(query.page === 1) {
        pageState.personList = data
      } else {
        pageState.personList.push(...data)
      }
      query.page = current_page
      pageState.loading = false
      if(current_page === total_pages) pageState.finished = true
    }
  }

  const communityList = homeStore.communityList
  const communityChildList = ref<IdLabel[]>([])

  const showFilterPicker = ref(false) // 小区
  const onFilterConfirm = () => {
    getPersonList(false)
    showFilterPicker.value = false
  }
  const onFilterRest = () => {
    query.keyword = ''
    query.mch_id = ''
    query.mch_label = ''
    query.community_id = ''
    query.community_label = ''
    query.confirm_status = ''
    query.confirm_label = ''
    query.isolate_status = ''
    query.isolate_status_label = ''
    query.isolate_reason = ''
    query.isolate_reason_label = ''
    query.page = 1

    onFilterConfirm()
  }

  const showCommunityPicker = ref(false) // 社区
  const onCommunityConfirm = (data: IdLabel) => {
    const { id, label } = data
    query.community_label = label
    query.community_id = id
    showCommunityPicker.value = false
    communityChildList.value = homeStore.communityALlChild[id] // 村/小区赋值
  }

  const showCommunityChildPicker = ref(false) // 小区
  const onCommunityChildConfirm = (data: IdLabel) => {
    const { id, label } = data
    query.mch_label = label
    query.mch_id = id
    showCommunityChildPicker.value = false
  }

  const showReasonPicker = ref(false) // 隔离原因
  const onReasonConfirm = (data:IdName) => {
    const { id, name } = data
    query.isolate_reason_label = name
    query.isolate_reason = id
    showReasonPicker.value = false
  }

  const isolate_status_list = computed(() => personStore.isolate_status)
  const showIsolateStatusPicker = ref(false) // 隔离状态
  const onIsolateStatusConfirm = (data:IdLabel) => {
    const { id, label } = data
    query.isolate_status_label = label
    query.isolate_status = id
    showIsolateStatusPicker.value = false
  }

  const confirm_status_list = computed(() => personStore.confirm_status)
  const showConfirmStatusPicker = ref(false) // 隔离状态
  const onConfirmStatusConfirm = (data:IdLabel) => {
    const { id, label } = data
    query.confirm_label = label
    query.confirm_status = id
    showConfirmStatusPicker.value = false
  }

  const handleOperate = ({person, index, type}: OperateParams) => {
    // const { confirm_status, isolate_status } = person
    curPerson.value = person
    curIndex.value = index
    if(type === 'accept') {
      personStore.setShowAcceptDialog(true)
    }
    if(type === 'release') {
      personStore.setShowReleaseDialog(true)
    }
    if(type === 'rejected') {
      personStore.setShowRejectedDialog(true)
    }
    if(type === 'extend') {
      personStore.setShowExtendDialog(true)
    }
    if(type === 'household') {
      personStore.setShowHouseholdDialog(true)
    }
    if(type === 'relieve') {
      personStore.setShowRelieveDialog(true)
    }

    // if (String(confirm_status) === '1' || String(confirm_status) === '3') {
    //   filterOperateList.value = operateList.value.filter(item => {
    //     return item.confirm_status === 1
    //   })
    // } else {
    //   if (String(isolate_status) === '1') {
    //     filterOperateList.value = operateList.value.filter(item => item.isolate_status === 1)
    //   }
    //   if (String(isolate_status) === '2') {
    //     filterOperateList.value = operateList.value.filter(item => item.isolate_status === 2)
    //   }
    // }
    // showOperatePicker.value = true
  }


  const onrefresh = () => {
    setTimeout(() => {
      query.page = 1
      getPersonList(false)
      pageState.refreshing = false
      pageState.finished = false
   }, 1000)
  }

  const getPersonListMore = () => {
    pageState.loading = true
    let page = query.page + 1
    query.page = page++
    getPersonList(false);
  }

  const handleSuccessCb = (params:any) => {
    Notify({
      type: 'success',
      message: '更新成功',
      duration: 2000,
      onOpened: () => {
        if(params) {
          console.log(params, curIndex.value);
          pageState.personList[curIndex.value] = params
        }
      }
    })
  }

  return {
    ...toRefs(pageState),
    ...toRefs(query),
    showOperatePicker,
    onOperateConfirm,
    getPersonList,
    showFilterPicker,
    onFilterConfirm,
    communityList,
    showCommunityPicker,
    onCommunityConfirm,
    communityChildList,
    showCommunityChildPicker,
    onCommunityChildConfirm,
    showReasonPicker,
    onReasonConfirm,
    isolate_status_list,
    showIsolateStatusPicker,
    onIsolateStatusConfirm,
    confirm_status_list,
    showConfirmStatusPicker,
    onConfirmStatusConfirm,
    onFilterRest,
    handleOperate,
    filterOperateList,
    curPerson,
    onrefresh,
    // page: query.page,
    // ...toRefs(query),
    getPersonListMore,
    handleSuccessCb,
  }
}

